<ng-container nzType="flex">
    <ul *ngIf="this.index == 0" class="clearfix">
        <li>
            <div draggable="true" (drag)="dragStart('txt')">
                <i class="icon icon-文字"></i>
                文字
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('img')">
                <i class="icon icon-图片1"></i>
                图片
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_web')">
                <i class="icon icon-网页"></i>
                网页
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('pdf')">
                <i class="icon icon-pdf"></i>
                PDF
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('video')">
                <i class="icon icon-视频"></i>
                视频
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('audio')">
                <i class="icon icon-音频"></i>
                音频
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('button')">
                <i class="icon icon-按钮"></i>
                按钮
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_select')">
                <i class="icon icon-select"></i>
                选项
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_bullet')">
                <i class="icon icon-弹幕"></i>
                弹幕
            </div>
        </li>

    </ul>
    <ul *ngIf="this.index == 1" class="clearfix">
        <li>
            <div draggable="true" (drag)="dragStart('SG_brain')">
                <i class="icon icon-灯泡"></i>
                头脑风暴
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_weibo')">
                <i class="icon icon-微博"></i>
                仿真微博
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_tieba')">
                <i class="icon icon-贴吧"></i>
                仿真贴吧
            </div>
        </li>
        <li>
            <div draggable="true"  (drag)="dragStart('SG_QQ')">
                <i class="icon icon-qq"></i>
                仿真QQ群
            </div>
        </li>

        <li>
            <div draggable="true" (drag)="dragStart('SG_tnfbgroup')">
                <i class="anticon anticon-team"></i>
                互动比拼
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_infoext')">
                <i class="anticon anticon-message"></i>
                互动比拼<br> 信息提取
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_causal')">
                <i class="anticon anticon-bulb"></i>
                因果发散法
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_mindmap')">
                <i class="anticon anticon-api"></i>
                思维导图
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_guess')">
                <i class="anticon anticon-question-circle"></i>
                因果推想
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_special_battle')">
                <i class="anticon anticon-global"></i>
                独特创意比拼
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_seek')">
                <i class="anticon anticon-search"></i>
                定向 <br>
                头脑风暴
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_originality_case')">
                <i class="anticon anticon-exception"></i>
                创意方案<br>虚拟仿真
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_sixHat')">
                <i class="anticon anticon-fork"></i>
                六顶思考帽
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_turns_speak')">
                <i class="anticon anticon-usb"></i>
                轮流发言
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_coffee')">
                <i class="anticon anticon-usb"></i>
                世界咖啡屋
            </div>
        </li>

        <!--<li>-->
        <!--<div draggable="true" (drag)="dragStart('SG_weibo')">-->
        <!--<i class="icon icon-微博"></i>-->
        <!--仿真微博-->
        <!--</div>-->
        <!--</li>-->
        <!--<li>-->
        <!--<div draggable="true" (drag)="dragStart('SG_tieba')">-->
        <!--<i class="icon icon-贴吧"></i>-->
        <!--仿真贴吧-->
        <!--</div>-->
        <!--</li>-->
        <!--<li>-->
        <!--<div draggable="true"  (drag)="dragStart('SG_QQ')">-->
        <!--<i class="icon icon-qq"></i>-->
        <!--仿真QQ群-->
        <!--</div>-->
        <!--</li>-->
        <!---->

    </ul>
    <ul *ngIf="this.index == 2" class="clearfix">
        <li>
            <div draggable="true" (drag)="dragStart('SG_vote')">
                <i class="anticon anticon-flag"></i>
                投票题
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_judgement')">
                <i class="anticon anticon-check-circle-o"></i>
                判断题
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_audio')">
                <i class="anticon anticon-check-circle"></i>
                单选题
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_checkbox')">
                <i class="anticon anticon-check-square"></i>
                多选题
            </div>
        </li>
        <li>
            <div draggable="true" (drag)="dragStart('SG_subjective')">
                <i class="anticon anticon-file-text"></i>
                主观题
            </div>
        </li>

    </ul>
    <div class="bottom-tab">
        <a [class.active]="this.index == 0" (click)="toggle(0)">
            <i class="icon icon-工具"></i>
            工具
        </a>
        <a [class.active]="this.index == 1" (click)="toggle(1)">
            <i class="icon icon-布置场景"></i>
            场景
        </a>
        <a [class.active]="this.index == 2" (click)="toggle(2)">
            <i class="anticon anticon-pushpin"></i>
            题型
        </a>
    </div>
</ng-container>
